<template>
  <div class="submitAdvertise mt-6">
    <div class="rounded-lg px-4 pt-6 pb-7 box-shadow">
      <h3 class="text-2xl text-gray-1000 font-semibold text-center">
        {{$t('submit_toolsYouNeedToAdvertise')}}
      </h3>
      <el-form :model="form"
        label-position="top"
        status-icon
        :rules="rules"
        ref="form"
        label-width="100px"
        class="max-w-4xl mx-auto mt-6">
        <el-form-item required="required"
          class="form-item-label"
          prop="tool_handle">
          <template v-slot:label
            class="w-full">
            <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-3 sm:mb-0 gap-y-3">
              <div class="sm:flex-1 sm:w-0 flex items-center flex-wrap space-y-2 sm:space-y-0 gap-x-6 gap-y-2 sm:gap-y-3">
                <span>
                  {{$t('submit_tool')}}</span>
              </div>
              <div class="text-base text-gray-1500">{{$t('submit_noQueueAdvertise')}}</div>
            </div>
          </template>
          <virtual-select v-model="form.tool_handle"
            :list="toolsList"
            label="n"
            value="h"
            concatKey="w"
            :placeholder="$t('submit_pleaseSelectYourTool')"
            :keeps-params="10"
            :is-concat="true"
            :concat-symbol="' || '"
            :is-multiple="false"
            :disabled="false"
            :allow-create="false" />
        </el-form-item>

        <el-form-item :label="''"
          required="required"
          prop="advert_package_id">
          <h3 class="text-2xl text-gray-1000 font-semibold text-center mt-9 mb-7">
            {{$t('submit_selectTheNumberOfClicks')}}
          </h3>
          <div class="grid md:grid-cols-3 gap-x-3 gap-y-4 md:gap-y-2"
            v-if="!loading">
            <div class="border rounded-lg flex items-center justify-between gap-3 py-4 px-3"
              v-for="(item, key) in mealsList"
              :key="key"
              :class="{'bg-purple-1300 border-purple-1300 text-white hover:opacity-90': form.advert_package_id === item.id, 'border-gray-1600 text-gray-1000 hover:border-purple-2500 hover:bg-purple-2600 hover:text-purple-1300 cursor-pointer': form.advert_package_id !== item.id}"
              @click="changeMeal(item)">
              <span class="text-base">{{$t('submit_clicksNum')}}</span>
              <span class="text-lg font-semibold">{{item.quota}}</span>
            </div>
          </div>
          <el-skeleton animated
            v-else>
            <template slot="template">
              <div class="grid md:grid-cols-3 gap-x-3 gap-y-4 md:gap-y-2">
                <el-skeleton-item variant="text"
                  class="rounded-lg"
                  style="height: 62px;"
                  v-for="(item, key) in 6"
                  :key="key" />
              </div>
            </template>
          </el-skeleton>
        </el-form-item>

        <div class="flex justify-between items-center bg-gray-2600 px-4 sm:px-14 py-6 mt-7 submit-ctrl gap-4 flex-wrap rounded-sm">
          <div class="flex-shrink-0 w-full sm:w-auto">
            <div class="text-base text-gray-1500"
              v-html="$t('submit_numberOfClicksNum', {num: hasRealVal(currentMeal) && hasRealVal(currentMeal.quota) ? currentMeal.quota : '--'})"></div>
            <div class="h-px bg-gray-2000 m-1.5"></div>
            <div class="gap-3">
              <div class="text-3xl text-gray-1000 font-semibold">{{$t('submit_totalNum', {num: hasRealVal(currentMeal) && hasRealVal(currentMeal.price) ? String(currentMeal.price) : '--'})}}</div>
              <div class="text-sm text-gray-1500 mt-3"
                v-html="$t('submit_costPerClickNum', {num: hasRealVal(currentMeal) && hasRealVal(currentMeal.quota) && hasRealVal(currentMeal.price) ? getPerClickCost(currentMeal) : '--'})"></div>
            </div>
          </div>
          <el-button type="primary"
            class="flex-shrink-0 w-full sm:w-auto"
            :loading="submitLoading"
            @click="submitForm()">
            {{$t('submit_payNum', {num: currentMeal && currentMeal.price ? String(currentMeal.price) : ''})}}
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="box-shadow example mt-4 pt-14 pb-14 px-4">
      <div class="max-w-4xl mx-auto">
        <h3 class="text-2xl text-gray-1000 font-semibold mb-9 text-center">{{$t('submit_advertiseAToolExample')}}</h3>
        <div class="px-4">
          <p class="text-base text-gray-1000 px-5"
            v-html="$t('submit_weFullyAutomate')"></p>
          <p class="text-base text-gray-1000 px-5 mt-3"
            v-html="$t('submit_prioritizeForYou')"></p>
          <p class="text-sm text-gray-1500 px-5 mt-1"
            v-html="$t('submit_youCanPause')"></p>
          <div class="h-px bg-gray-2000 my-10"></div>
        </div>
        <h3 class="text-xl text-gray-1000 font-semibold mb-12 text-center">{{$t('submit_hereAreAFew')}}</h3>
        <div class="space-y-5 md:space-y-0 md:flex items-start justify-between">
          <div class="flex-shrink-0 example-01">
            <img src="@/static/images/image_2.webp"
              alt="toolify"
              loading="lazy">
            <div class="mt-6 space-y-4.5">
              <div class="flex items-start gap-2.5">
                <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
                  iconName='check_4'></svg-icon>
                <div class="flex-1 w-0">
                  <p class="text-base text-gray-1000">
                    {{$t('submit_appearsOnTheHomePage')}}
                  </p>
                </div>
              </div>
              <div class="flex items-start gap-2.5">
                <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
                  iconName='check_4'></svg-icon>
                <div class="flex-1 w-0">
                  <p class="text-base text-gray-1000">
                    {{$t('submit_appearInDifferent')}}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-shrink-0 example-02">
            <img src="@/static/images/image_3.webp"
              alt="toolify"
              loading="lazy">
            <div class="mt-6 space-y-4.5">
              <div class="flex items-start gap-2.5">
                <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
                  iconName='check_4'></svg-icon>
                <div class="flex-1 w-0">
                  <p class="text-base text-gray-1000">
                    {{$t('submit_appearOnYourCompetitors')}}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="h-px bg-gray-2000 my-10"></div>
        <h3 class="text-xl text-gray-1000 font-semibold mb-12 text-center">{{$t('submit_featured')}}</h3>
        <div class="space-y-5 md:space-y-0 md:flex items-start justify-between">
          <div class="flex-shrink-0 example-03">
            <img src="@/static/images/image_4.webp"
              class="block"
              alt="toolify"
              loading="lazy">
            <div class="mt-6 space-y-4.5">
              <div class="flex items-start gap-2.5">
                <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
                  iconName='check_4'></svg-icon>
                <div class="flex-1 w-0">
                  <p class="text-base text-gray-1000">
                    {{$t('submit_featuredLocationOn')}}
                  </p>
                </div>
              </div>
              <div class="flex items-start gap-2.5">
                <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
                  iconName='check_4'></svg-icon>
                <div class="flex-1 w-0">
                  <p class="text-base text-gray-1000">
                    {{$t('submit_theHigherTheAd')}}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-shrink-0 example-04">
            <img src="@/static/images/image_5.webp"
              alt="toolify"
              loading="lazy">
            <div class="mt-6 space-y-4.5">
              <div class="flex items-start gap-2.5">
                <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
                  iconName='check_4'></svg-icon>
                <div class="flex-1 w-0">
                  <p class="text-base text-gray-1000">
                    {{$t('submit_atTheTopOfMost')}}
                  </p>
                </div>
              </div>
              <div class="flex items-start gap-2.5">
                <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
                  iconName='check_4'></svg-icon>
                <div class="flex-1 w-0">
                  <p class="text-base text-gray-1000">
                    {{$t('submit_randomizeTheAdvertisingTools')}}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="h-px bg-gray-2000 my-10"></div>
        <div class="space-y-5 md:space-y-0 md:flex items-center justify-between md:px-10 example-05">
          <img src="@/static/images/image_6.webp"
            class="flex-shrink-0"
            alt="toolify"
            loading="lazy">
          <div class="mt-6 space-y-9 example-right">
            <div class="flex items-start gap-2.5">
              <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
                iconName='check_4'></svg-icon>
              <div class="flex-1 w-0">
                <p class="text-base text-gray-1000">
                  {{$t('submit_advertisingOpportunitiesAppear')}}
                </p>
              </div>
            </div>
            <div class="flex items-start gap-2.5">
              <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
                iconName='check_4'></svg-icon>
              <div class="flex-1 w-0">
                <p class="text-base text-gray-1000">
                  {{$t('submit_allClicksOnTheAd')}}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="h-px bg-gray-2000 my-10"></div>
        <h3 class="text-xl text-gray-1000 font-semibold mb-6 text-center">{{$t('submit_advertisingDataAnalysisForm')}}</h3>
        <div class="md:px-4">
          <div class="flex items-start gap-2.5 ">
            <svg-icon className="w-4.5 h-4.5 flex-shrink-0 mt-1"
              iconName='check_4'></svg-icon>
            <div class="flex-1 w-0">
              <p class="text-base text-gray-1000">
                {{$t('submit_wellProvideYouWith')}}
              </p>
            </div>
          </div>
          <div class="overflow-x-auto mt-6">
            <div class="tTable">
              <table>
                <thead>
                  <tr>
                    <th style="width: 17%">
                      <div class="cell">
                        {{$t('submit_exampleTools')}}
                      </div>
                    </th>
                    <th style="width: 16%">
                      <div class="cell">
                        {{$t('submit_organicClicks')}}
                      </div>
                    </th>
                    <th style="width: 12.5%">
                      <div class="cell">
                        {{$t('submit_paidClicks')}}
                      </div>
                    </th>
                    <th style="width: 12.5%">
                      <div class="cell">
                        {{$t('submit_totalClicks')}}
                      </div>
                    </th>
                    <th style="width: 14%">
                      <div class="cell">
                        {{$t('submit_openDetails')}}
                      </div>
                    </th>
                    <th style="width: 9%">
                      <div class="cell">
                        {{$t('submit_save')}}
                      </div>
                    </th>
                    <th style="width: 19%">
                      <div class="cell">
                        {{$t('submit_totalImpressions')}}
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="cell">
                        AI-Portrait
                      </div>
                    </td>
                    <td>
                      <div class="cell">
                        1,795
                      </div>
                    </td>
                    <td>
                      <div class="cell">
                        500
                      </div>
                    </td>
                    <td>
                      <div class="cell">
                        1,974
                      </div>
                    </td>
                    <td>
                      <div class="cell">
                        2,541
                      </div>
                    </td>
                    <td>
                      <div class="cell">
                        84
                      </div>
                    </td>
                    <td>
                      <div class="cell">
                        1,156,152
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'SubmitAdvertise',
  props: {},
  data() {
    return {
      form: {
        tool_handle: null,
        advert_package_id: null,
      },
      rules: {
        tool_handle: [
          {
            required: true,
            message: this.$i18n.t('submit_pleaseSelectATool'),
            trigger: ['change', 'blur'],
          },
        ],
        advert_package_id: [
          {
            required: true,
            message: this.$i18n.t('submit_pleaseSelectRank'),
            trigger: ['change', 'blur'],
          },
        ],
      },
      loading: true,
      submitLoading: false,
      toolsList: [],

      mealsList: [],
      currentMeal: null,
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
      toolify_isLogin: (state) => state.toolify_isLogin,
    }),
  },
  created() {
    Promise.all([this.getAdvertise(), this.getSearchToolsList()])
  },
  mounted() {
    if (process.browser) {
      let submitForm = localStorage.getItem('submitAdvertiseForm')
      if (submitForm) {
        this.form = JSON.parse(submitForm)
      }
      localStorage.removeItem('submitAdvertiseForm')
    }
  },
  methods: {
    changeMeal(item) {
      this.currentMeal = item
      this.form.advert_package_id = item.id
    },
    async getAdvertise() {
      this.loading = true
      try {
        const res = await this.$axiosApi.advertisePackages()
        this.loading = false
        if (
          res &&
          res.code === 200 &&
          res.data.data &&
          Array.isArray(res.data.data) &&
          res.data.data.length > 0
        ) {
          this.mealsList = res.data.data
        }
      } catch (error) {
        this.loading = false
      }
    },
    async getSearchToolsList() {
      try {
        let uri
        if (process.browser) {
          uri = window.location.origin
        }
        this.$axios
          .$get(
            `${
              process.env.NODE_ENV === 'development' || !uri ? '' : uri
            }/self-api/v1/tools/catalog.json`
          )
          .then((res) => {
            this.toolsList = res.tool
          })
          .catch((error) => {
            console.error('请求工具失败：', error)
          })
      } catch (error) {}
    },
    getPerClickCost(item) {
      return (Number(item.price) / Number(item.quota)).toFixed(2)
    },
    submitForm() {
      if (!this.toolify_isLogin) {
        localStorage.setItem('submitAdvertiseForm', JSON.stringify(this.form))
        this.$router.replace(`/login?from=${this.$route.name}`)
        return false
      }

      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.submitLoading = true
          try {
            let res
            let req = {}
            let langPath = `${this.locale !== 'en' ? `/${this.locale}` : ''}`
            req.success_url = `${window.location.origin}${langPath}/payment?type=advertise`
            req.cancel_url = `${window.location.origin}${langPath}/advertise`

            req.advert_package_id = this.form.advert_package_id
            req.tool_handle = this.form.tool_handle
            res = await this.$axiosApi.submitAdvertise(req)
            this.submitLoading = false

            if (res) {
              if (
                res.code === 200 &&
                res.data &&
                res.data.stripe &&
                res.data.stripe.url
              ) {
                window.location.href = res.data.stripe.url
              } else if (res.code === 400102) {
                this.getSearchToolsList()
              } else if (res.code === 400103) {
                this.getAdvertise()
              }
            }
          } catch (error) {
            this.submitLoading = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.submitAdvertise {
  .box-shadow {
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.06);
  }
  .el-button-group {
    .el-button {
      font-size: 16px;
      color: #191919;
      background: none;
      &:hover {
        border-color: #7150e6;
        background: none;
        color: #7150e6;
      }
      &.actived {
        border-color: #7150e6;
        background: none;
        color: #7150e6;
        z-index: 1;
      }
    }
  }
  .el-form {
    .el-form-item {
      margin-bottom: 24px;
      .el-form-item__label {
        font-size: 16px;
        font-weight: bold;
        color: #191919;
        line-height: 21px;
        padding-bottom: 14px;
      }
    }
  }
  .submit-ctrl {
    .el-button {
      font-size: 16px;
      max-width: 100%;
      padding-left: 30px;
      padding-right: 30px;
    }
  }

  .example {
    img {
      width: 100%;
    }
  }

  .tTable {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    width: 100%;
    min-width: 700px;
    table {
      table-layout: fixed;
      width: 100%;
      td,
      th {
        box-sizing: border-box;
        min-width: 0;
        padding: 12px 0;
        position: relative;
        text-overflow: ellipsis;
        vertical-align: middle;
        .cell {
          box-sizing: border-box;
          display: inline-block;
          padding-left: 8px;
          padding-right: 8px;
          position: relative;
          vertical-align: middle;
          width: 100%;
          text-overflow: ellipsis;
          line-height: 23px;
          overflow: hidden;
          text-align: center;
        }
      }
      thead {
        tr {
          th {
            background: #f8f9fb;
            color: #666;
            font-weight: 400;
            border-bottom: 1px solid #ebeef5;
          }
        }
      }
      tbody {
        tr {
          td {
            color: #191919;
            font-size: 16px;
            padding-bottom: 16px;
            padding-top: 16px;
            transition: background-color 0.25s ease;
            font-weight: 600;
          }
        }
      }
    }
  }
}
@media (min-width: 768px) {
  .submitAdvertise {
    .example-01 {
      width: 41.16331096% !important;
      img {
        width: 100%;
        aspect-ratio: 92/115;
        image-rendering: pixelated;
      }
    }
    .example-02 {
      width: 52.237% !important;
      img {
        width: 100%;
        aspect-ratio: 467/460;
        image-rendering: pixelated;
      }
    }
    .example-03 {
      width: 41.16331096% !important;
      img {
        display: block;
        max-width: 282px;
        margin: 0 auto;
        width: 100%;
        aspect-ratio: 47/58;
        image-rendering: pixelated;
      }
    }
    .example-04 {
      width: 52.237% !important;
      img {
        width: 100%;
        aspect-ratio: 467/348;
        image-rendering: pixelated;
      }
    }
    .example-05 {
      img {
        max-width: 29.238329238%;
        aspect-ratio: 140/191;
        image-rendering: pixelated;
      }
    }
    .example-right {
      width: 53.8083538% !important;
    }
  }
}
.form-item-label {
  ::v-deep .el-form-item__label {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    line-height: normal;
    font-size: initial;
    padding-bottom: 6px;
  }
}
</style>
